<template>
  <body id="register">
  <el-form class="register-form"
           :model="registerForm"
           :rules="rules"
           label-position="left"
           label-width="80px"
           ref="registerForm"
  >
    <h3>欢迎来到论文管理系统</h3>
    <el-form-item label="新用户名" prop="username">
      <el-input type="text" v-model="registerForm.username" prefix-icon="el-icon-user" placeholder="用户名不得超过30个字符"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="registerForm.password"
                autocomplete="off"
                prefix-icon="el-icon-key"
                placeholder="密码由包含数字和字母的6到16个字符组成"
                show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password"
                v-model="registerForm.checkPass"
                autocomplete="off"
                prefix-icon="el-icon-key"
                placeholder="请再输入一次密码"
                show-password></el-input>
    </el-form-item>
<!--    <el-form-item label="手机号码" prop="phone">-->
<!--      <el-input type="text" v-model="registerForm.phone" prefix-icon="el-icon-phone" placeholder="请输入手机号"></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="电子邮箱" prop="email">-->
<!--      <el-input type="email" v-model="registerForm.email" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>-->
<!--    </el-form-item>-->
    <el-row>
      <el-col :span="20">
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  </body>
</template>

<script>
export default {
  name: "Register",
  data() {
    var nameValidate= (rule,value,callback)=>{
      if(value==='')
        callback(new Error('请输入用户名'))
      if(value.toString().length>30)
        callback(new Error('输入的用户名不得超过30个字符'))
      callback()
    };
    //自定义的password校验，密码必须为6-16位，必须包含数字和英文字母
    var passwordValidate = (rule, value, callback) => {
      var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%'+*\-:;^_`0-9A-Za-z]{6,16}$/
      if(value===''){
        callback(new Error('请输入密码'))
      }
      else if(!reg.test(value))
      {
        callback(new Error('密码必须为6-16位，必须含有包含数字和英文字母'))
      }
      else if(this.registerForm.checkPass !== '') {
        this.$refs.registerForm.validateField('checkPass');
      }
      callback()
    };
    //自定义的重复密码校验
    var checkPassValidate = (rule, value, callback) => {
      if(value===''){
        callback(new Error('请再次输入密码'))
      }
      else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    };


    return {
      registerForm: {
        username: '',
        password: '',
        checkPass: '',
        // phone: '',
        // email: '',
      },
      rules: {
        username: [{
          validator:nameValidate, trigger: 'blur'
        }],
        password: [
          {
          validator: passwordValidate, trigger: 'blur'
        }],
        checkPass: [
          {
          validator: checkPassValidate, trigger: 'blur'
        }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post('/user/register',{
            username:this.registerForm.username,
            password:this.$md5(this.registerForm.password)
          }).then(res=>{
            const jwt=res.data.data.jwt
            const id=res.data.data.id
            const user={}
            user.token=jwt
            user.id=id
            user.username=this.registerForm.username
            user.authority=res.data.data.authority
            /*
              commit(opt,arg)
              opt是方法名，
              jwt是参数
             */
            this.$store.commit('login',user)
            this.$router.push("/index")
          }).catch(()=>{

          })
        }
        else{
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
#register {
  background: url('../../../src/assets/image/loginBackground.jpg') no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
html,body{
  margin: 0;
  padding: 0;
}
.register-form{
  background: #ffffff;
  border:2px solid lightblue;
  border-radius: 20px;
  margin:200px auto;
  width:400px;
  padding:20px;
}

/deep/ .el-form-item__error {
  color: #e6a23c;
  width: 200px;
  display: flex;
  left:0;
}


</style>
